<template>
    <div class="page-wrap">
        <h2>无缝轮播的数字翻牌器，一般用在大屏看板之中，样式可自行修改源码</h2>
        <h3>基本使用</h3>
        <div>
            <el-input type="textarea" :rows="2" placeholder="请输入内容" :value="code">
            </el-input>
        </div>
        <h3>参数</h3>
        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="name" label="参数" width="180">
            </el-table-column>
            <el-table-column prop="type" label="数据类型" width="180">
            </el-table-column>
            <el-table-column prop="description" label="说明">
            </el-table-column>
        </el-table>
        <h3 style="color: #409EFF;">效果</h3>
        <div class="digital-flop-wrap">
            <div class="digital-flop-box">
                <zll-digital-flop :value="num" :minLength="4"></zll-digital-flop>
            </div>
            <div class="digital-flop-box">
                <zll-digital-flop :value="num2" :minLength="4"></zll-digital-flop>
            </div>
        </div>
    </div>
</template>


<script>
import zllDigitalFlop from '@/components/zll-digital-flop.vue'
export default{
    components: {
        zllDigitalFlop
    },
    data(){
        return {
            code: "<zll-digital-flop :value='num' :minLength='4'></zll-digital-flop>",
            tableData: [
                {
                    name: "value", type: "String",
                    description: "当前数字"
                },
                {
                    name: "minLength", type: "Number",
                    description: "数字的最小长度，默认4"
                }
            ],


            timer: null,
            num: 0,
            timer2: null,
            num2: 9999
        }
    },
    created(){
        //模拟数字累加
        this.mockNumAdd()
        //模拟数字减少
        this.mockNumDecrease()
    },
    beforeDestroy(){
        //清除定时器
        clearInterval(this.timer)
        clearInterval(this.timer2)
    },
    methods: {
        //模拟数字累加
        mockNumAdd(){
            //先清理，在开启
            clearInterval(this.timer)
            //使用定时器自动累加
            this.timer = setInterval(()=>{
                //自增
                this.num++
                //达到极限值进行还原
                if(this.num > 9999){
                    this.num = 0
                }
            },3000)
        },
        //模拟数字减少
        mockNumDecrease(){
            //先清理，在开启
            clearInterval(this.timer2)
            //使用定时器
            this.timer2 = setInterval(()=>{
                //自减
                this.num2--
                //达到极限值进行还原
                if(this.num2 < 0){
                    this.num2 = 9999
                }
            },3000)
        },
    }
}
</script>


<style scoped>
.page-wrap {
    padding: 20px;
}
.page-wrap h2{
    margin-top: 0;
}
.page-wrap .digital-flop-wrap{
    display: flex;align-items: center;justify-content: center;
}
.page-wrap .digital-flop-wrap .digital-flop-box{
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 200px;
    margin-right: 20px;
}
.page-wrap .digital-flop-wrap .digital-flop-box:last-child{
    margin-right: 0;
}
</style>